<template>
  <div id="addPictureBatchPage">
    <h2>批量抓取图片</h2>
    <a-form layout="vertical" v-model="formData">
      <a-form-item label="关键词">
        <a-input placeholder="请输入关键词" v-model:value="formData.searchText" />
      </a-form-item>
      <a-form-item label="抓取数量">
        <a-input-number
          v-model:value="formData.count"
          :min="1"
          :max="30"
          placeholder="请输入抓取数量"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="名称前缀">
        <a-input placeholder="请输入名称前缀,会自动补充序号" v-model:value="formData.namePrefix" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" :loading="loading" style="width: 100%" @click="handleSubmit"
          >执行任务</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { uploadPictureByBatchUsingPost } from '@/api/tupian'
import { message } from 'ant-design-vue'

const loading = ref<boolean>(false)
const formData = reactive({
  searchText: '',
  count: 10,
  namePrefix: '',
})

const handleSubmit = async () => {
  loading.value = true
  const res = await uploadPictureByBatchUsingPost(formData)

  if (res.data.code === 0) {
    message.success('任务执行成功,成功数量：' + res.data.data)
  } else {
    message.error('任务执行失败')
  }
  loading.value = false
}
</script>

<style scoped>
#addPictureBatchPage {
  width: 80%;
  margin: 0 auto;
}
</style>
